<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级属性</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <comp1 :count="10"></comp1>
    </div>
  </body>

  <script>
    const App=Vue.createApp({})
    const comp1={
        props:{//履性只读
            count:{
                //类型不对会抛告警
                //[Vue warn]: Property "xxx" was accessed during render but is not defined on instance. 
                //  at <App>
                type: Number, //可以用数组让一个属性接受多个类型 [String, Number]
                required: false,
                default: 10 //可以接受一个函数 如
                  /**
                   * default : function(){
                   *   return 10;
                   * },
                   * //另外可配置验证器
                   * validator: function(value){
                   *    if(typeof(value) != 'number' || value <=10 ){
                   *      return false
                   *    }
                   *    return true
                   * }
                   */
            }
        },
        data(){
            return{
                thisCount: this.count
            }
        },
        methods:{
            click(){
              //属性只读
              //操作属性会报异常
              //[Vue warn]: Attempting to mutate prop "count". Props are readonly. {uid: 1, vnode: {…}, type: {…}, parent: {…}, appContext: {…}, …}
              //  this.count +=1
              //只能改 data域中值
              this.thisCount +=1
            }
        },
        computed:{
            innerCount :{
                get(){
                    //return this.count + this.thisCount
                    return this.thisCount
                }
            }
        },
        template:`
                <button @click="click">点击</button>
                <div>计数:{{innerCount}}</div>`
    }
    App.component("comp1",comp1)
    App.mount("#Application")
  </script>

</html>